<template>
  <div class="dataAudit" v-loading="loading">
    <page-title>资料审核</page-title>
    <div class="filterCont">
      <el-input class="inputItem inputStr" v-model="keywordSearch" placeholder="请输入内容" size="medium"></el-input>
      <el-button class="inputItem searchBtn" type="primary" icon="el-icon-search" size="medium" @click="searchFocus">搜索</el-button>
      <div class="inputItem centerAside">状态</div>
      <el-select class="inputItem selectInput" v-model="auitItem" size="medium" @change="selectChange">
        <el-option
          v-for="item in auitList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <div class="rightAside">总共<span class="dataNum">{{total_num}}</span>条数据，<span class="dataWaitNum">{{not_audit_num}}</span>条待审核</div>
    </div>
    <div @click="toastClick" :class="['imgToast',{'active':toastActive}]">
      <img @click.stop="imgClick" :src="toastUrl" alt="">
    </div>
    <div class="tableList">
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px">
        <!-- <el-table-column
          prop="simpleIntrl"
          label="个人资料"
          width="180">
        </el-table-column>
        <el-table-column
          prop="aboutMe"
          label="关于我">
        </el-table-column> -->
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称">
        </el-table-column>
        <el-table-column
          prop="earliest_time"
          label="上传时间">
        </el-table-column>
        <el-table-column
          prop="idCar"
          label="身份证">
          <template slot-scope="scope">
            <div v-if="scope.row.idCar.img[0]&&scope.row.idCar.img[1]">
              <img v-if="scope.row.idCar.img[0]" @click="checkImg(scope.row.idCar.img[0])" class="infoImg" :src="scope.row.idCar.img[0]" alt="">
              <img v-if="scope.row.idCar.img[1]" @click="checkImg(scope.row.idCar.img[1])" class="infoImg" :src="scope.row.idCar.img[1]" alt="">
            </div>
            <div v-else>
              暂未上传
            </div>
            <el-button type="success" v-if="scope.row.get.id_audit_category==2">已审核</el-button>
            <el-button :type="(scope.row.test.id_audit_category==1||scope.row.test.id_audit_category==2)?'danger':'primary'" size="mini" style="margin:0 auto;" v-if="scope.row.idCar.isAllow==1" @click="refuse(scope.$index, 'id_audit_category')">{{scope.row.test.id_audit_category==1||scope.row.test.id_audit_category==2?'拒绝':'同意'}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="xl"
          label="学历">
          <template slot-scope="scope">
            <div v-if="scope.row.xl.img[0]">
              <img v-if="scope.row.xl.img[0]" @click="checkImg(scope.row.xl.img[0])" class="infoImg" :src="scope.row.xl.img[0]" alt="">
              <!-- <img v-if="scope.row.xl.img[1]" @click="checkImg(scope.row.xl.img[1])" class="infoImg" :src="scope.row.xl.img[1]" alt=""> -->
            </div>
            <div v-else>
              暂未上传
            </div>
            <el-button type="success" v-if="scope.row.get.education_audit_category==2">已审核</el-button>
            <!--<img v-for="(item,index) in scope.row.xl.img"  @click="checkImg(item)" class="infoImg" :src="item" alt="">-->
            <el-button :type="scope.row.test.education_audit_category==1||scope.row.test.education_audit_category==2?'danger':'primary'" size="mini" style="margin:0 auto;" v-if="scope.row.xl.isAllow==1" @click="refuse(scope.$index, 'education_audit_category')">{{scope.row.test.education_audit_category==1||scope.row.test.education_audit_category==2?'拒绝':'同意'}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="wx"
          label="微信">
          <template slot-scope="scope">
            <div v-if="scope.row.get.wechat_audit_category!=0">
              <div class="text-center">{{scope.row.get.wechat}}</div>
              <img v-if="scope.row.wx.img[0]" @click="checkImg(scope.row.wx.img[0])" class="infoImg" :src="scope.row.wx.img[0]" alt=""> 
              <!-- <img v-if="scope.row.wx.img[1]" @click="checkImg(scope.row.wx.img[1])" class="infoImg" :src="scope.row.wx.img[1]" alt=""> -->
            </div>
            <div v-else>
              暂未上传
            </div>
            <el-button type="success"  v-if="scope.row.get.wechat_audit_category==2">已审核</el-button>
            <!--<img v-for="(item,index) in scope.row.wx.img"  @click="checkImg(item)" class="infoImg" :src="item" alt="">-->
            <el-button :type="scope.row.test.wechat_audit_category==1||scope.row.test.wechat_audit_category==2?'danger':'primary'" size="mini" style="margin:0 auto;" v-if="scope.row.wx.isAllow==1" @click="refuse(scope.$index, 'wechat_audit_category')">{{scope.row.test.wechat_audit_category==1||scope.row.test.wechat_audit_category==2?'拒绝':'同意'}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="sj"
          label="手机">
        </el-table-column>
        <el-table-column
          prop="fc"
          label="房产信息">
          <template slot-scope="scope">
            <div v-if="scope.row.fc.img[0]&&scope.row.fc.img[1]">
              <img v-if="scope.row.fc.img[0]" @click="checkImg(scope.row.fc.img[0])" class="infoImg" :src="scope.row.fc.img[0]" alt="">
              <img v-if="scope.row.fc.img[1]" @click="checkImg(scope.row.fc.img[1])" class="infoImg" :src="scope.row.fc.img[1]" alt="">
            </div>
            <div v-else>
              暂未上传
            </div>
            <el-button type="success"  v-if="scope.row.get.house_audit_category==2">已审核</el-button>
            <!--<img v-for="(item,index) in scope.row.fc.img"  @click="checkImg(item)" class="infoImg" :src="item" alt="">-->
            <el-button :type="scope.row.test.house_audit_category==2||scope.row.test.house_audit_category==1?'danger':'primary'" size="mini" style="margin:0 auto;" v-if="scope.row.fc.isAllow==1" @click="refuse(scope.$index, 'house_audit_category')">{{scope.row.test.house_audit_category==2||scope.row.test.house_audit_category==1?'拒绝':'同意'}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="cl"
          label="车辆信息">
          <template slot-scope="scope">
            <div v-if="scope.row.cl.img[0]&&scope.row.cl.img[1]">
              <img v-if="scope.row.fc.img[0]" @click="checkImg(scope.row.cl.img[0])" class="infoImg" :src="scope.row.cl.img[0]" alt="">
              <img v-if="scope.row.fc.img[1]" @click="checkImg(scope.row.cl.img[1])" class="infoImg" :src="scope.row.cl.img[1]" alt="">
            </div>
            <div v-else>
              暂未上传
            </div>
            <el-button type="success"  v-if="scope.row.get.car_audit_category==2">已审核</el-button>
            <el-button :type="scope.row.test.car_audit_category==1||scope.row.test.car_audit_category==2?'danger':'primary'" size="mini" style="margin:0 auto;" v-if="scope.row.cl.isAllow==1" @click="refuse(scope.$index, 'car_audit_category')">{{scope.row.test.car_audit_category==2||scope.row.test.car_audit_category==1?'拒绝':'同意'}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.get.car_audit_category==2&&scope.row.get.education_audit_category==2&&scope.row.get.house_audit_category==2&&scope.row.get.id_audit_category==2&&scope.row.get.wechat_audit_category==2" type="text" disabled>已审核认证</el-button>
            <el-button v-else-if="scope.row.get.car_audit_category==1||scope.row.get.education_audit_category==1||scope.row.get.house_audit_category==1||scope.row.get.id_audit_category==1||scope.row.get.wechat_audit_category==1" type="text" @click="authonByKey(scope.row)">点击审核认证</el-button>
            <el-button v-else type="text" disabled>暂时无法审核</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footCont" style="display: flex;justify-content: center;align-items: center;margin-top:30px;margin-bottom:40px;" v-if="total">
      <el-pagination
        background
        layout="prev, pager, next"
        :size="page_size"
        :total="total"
        :current-page="currentPage"
      @current-change="handleCurrentChange">
      </el-pagination>
    </div>

  </div>
</template>
<script>
  import Vue from 'vue';
import * as api from './../../../api/api';
export default {
  data(){
    return{
      keywordSearch:'',
      auitList: [{
        value: '1',
        label: '待审核用户'
      }, {
        value: '2',
        label: '认证用户'
      }, {
        value: '3',
        label: '所有用户'
      }],
      auitItem: '1',
      page_size:10,
      total:100,
      currentPage:1,
      total_num:0,
      not_audit_num:0,
      loading:false,
      tableData: [
        {
          simpleIntrl: '发生纠纷噶舒服；发发发顺丰；发发书法风格是多少；',
          aboutMe: '感受感觉时光还是个帅哥给谁更实惠更是根深蒂固水果水果水果',
          idCar: {},
          xl: {},
          wx: {},
          sj: 5265823652375235,
          fc: {},
          cl: {}
        }
      ],
      toastUrl:'',
      toastActive:false,
    }
  },
  methods: {
    selectChange(){
      this.clearPageList();
      this.getSearchList();
    },
    searchFocus(){
      this.clearPageList();
      this.getSearchList();
    },
    clearPageList(){
      this.page_size=10;
      this.total=100;
      this.currentPage=1;
    },
    authonByKey(row){
      this.$confirm('是否通过审核认证?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.authonUser({
        uuid:row.uuid,
        id_audit_category:row.test.id_audit_category==1?2:row.test.id_audit_category,
        education_audit_category:row.test.education_audit_category==1?2:row.test.education_audit_category,
        wechat_audit_category:row.test.wechat_audit_category==1?2:row.test.wechat_audit_category,
        car_audit_category:row.test.car_audit_category==1?2:row.test.car_audit_category,
        house_audit_category:row.test.house_audit_category==1?2:row.test.house_audit_category,
      }).then(
          ({data})=>{
            if(data.code==300000){
              this.getSearchList();
              this.$message({
                type: 'success',
                message: '审核认证成功'
              });
            }else{
              this.$message({
                type: 'info',
                message: '网络出错，认证失败，请重试'
              });
            }
          },
          (err)=>{
            this.$message({
              type: 'info',
              message: '审核认证失败'
            });
          }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消审核认证'
        });
      });
    },
    checkImg(imgSrc){
      this.toastUrl=imgSrc;
      this.toastActive=true;
    },
    toastClick(){
      this.toastUrl='';
      this.toastActive=false;
    },
    imgClick(){
      return;
    },
    refuse(index, row){
      let newIndexData=this.tableData[index];
      this.tableData[index].test[row]==2||this.tableData[index].test[row]==1?newIndexData['test'][row]=0:newIndexData['test'][row]=2;
      this.tableData.splice(index,1,newIndexData);
    },
    //搜索查询分页{
    getSearchList(){
      this.loading=true;
      let me=this;
      me.tableData=[];
      document.getElementsByClassName('content-main')[0].scrollTop=0;
      api.searchAuthen({
        keyword:this.keywordSearch,
        audit_status:this.auitItem,
        page:this.currentPage,
        size:this.page_size,
      }).then(
        ({data})=>{
          if(data.code==300000){
            this.not_audit_num=data.data.not_audit_num;
            this.total_num=data.data.total_num;
            if(data.data.data){
              let dataArr=data.data.data;
              dataArr.forEach(
                (x)=>{
                  me.tableData.push({
                    id:x.id,
                    nickname:x.nickname,
                    earliest_time:x.earliest_time,
                    simpleIntrl: `${x.nickname};${x.sex==1?"男;":'女;'}${x.age}岁;${x.industry}`,
                    aboutMe: x.introduce,
                    idCar:{img:[x.id_front_pic,x.id_reverse_pic],isAllow:x.id_audit_category},
                    xl: {img:[x.education_pic],isAllow:x.education_audit_category},
                    wx: {img:[x.wechat_qr_code],isAllow:x.wechat_audit_category},
                    sj: x.phone,
                    fc:{img:[x.house_front_pic,x.house_reverse_pic],isAllow:x.house_audit_category},
                    cl: {img:[x.car_front_pic,x.car_reverse_pic],isAllow:x.car_audit_category},
                    uuid:x.uuid, 
                    get:{
                      id_audit_category:x.id_audit_category,
                      education_audit_category:x.education_audit_category,
                      wechat_audit_category:x.wechat_audit_category,
                      wechat:x.wechat,
                      car_audit_category:x.car_audit_category,
                      house_audit_category:x.house_audit_category, 
                    },
                    test:{
                      id_audit_category:x.id_audit_category,
                      education_audit_category:x.education_audit_category,
                      wechat_audit_category:x.wechat_audit_category,
                      wechat:x.wechat,
                      car_audit_category:x.car_audit_category,
                      house_audit_category:x.house_audit_category,
                    }
                  })
                }
              );
            };
            if(data.data.info){
              this.page_size=data.data.info.page_size;
              this.total=data.data.info.total;
            };
          };
          this.loading=false;
        },
        (err)=>{
          this.loading=false;
        }
      )
    },
    // 审核
    authonUser(data){
      return api.examineInfo({
        uuid:data.uuid,
        id_audit_category:data.id_audit_category,
        education_audit_category:data.education_audit_category,
        wechat_audit_category:data.wechat_audit_category,
        house_audit_category:data.house_audit_category,
        car_audit_category:data.car_audit_category,
      })
    },
    //分页改变
    handleCurrentChange(val){
      this.currentPage=val;
      this.getSearchList();
    },
  },
  mounted(){
    //默认获取未认证用户的列表
    this.getSearchList();
  },
}
</script>
<style lang="scss" scoped>
.infoImg{
  display: block;
  width:70%;
  height: auto;
  margin: 0 auto 10px;
}
.filterCont{
  overflow: hidden;
  padding:30px;
  .inputItem{
    float: left;
  }
  .inputStr{
    width: 200px;
  }
  .searchBtn{
    margin-left: 10px;
  }
  .selectInput{
    width: 120px;
  }
  .centerAside{
    width: 50px;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    text-align: center;
    margin-left: 30px;
    margin-right: 10px;
    border:1px solid #409EFF;
    border-radius: 4px;
    color: #409EFF;
  }
  .rightAside{
    line-height: 36px;
    float: right;
    font-size: 14px;
    color: #000;
    .dataNum{
      color: #409EFF;
      font-size: 16px;
      font-weight: bold;
    }
    .dataWaitNum{
      color: #F56C6C;
      font-size: 16px;
      font-weight: bold;
    }
  }
}
.tableList{
  padding:30px;
  padding-top:0;
}
.imgToast{
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin:auto;
  background: rgba(0,0,0,0.5);
  z-index: 999;
  width: 0%;
  height: 0%;
  overflow: hidden;
  img{
    display: block;
    max-width: 400px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}
.imgToast.active{
  width:100%;
  height:100%;
}
</style>
